<div class="row">
    <div class="col-lg-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span>节点健康统计</span>
            </div>
            <div class="panel-body" style="height:397px;overflow-y:auto;overflow-x:hidden;">
                <table class="table" *ngIf="switch === '1'" [@flyIn]="'active'">
                    <thead>
                        <tr>
                            <th> 统计类型</th>
                            <th class="text-center">正常</th>
                            <th class="text-center">异常</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of nodestatistics" style="height:70px;cursor:pointer" class="status" (click)="statusDetail($event.target.className)">
                            <td [class]="item.category">{{item.categoryName}}</td>
                            <td style="color:#87aeef;text-align:center;" [class]="item.category">
                                {{item.up}}
                            </td>
                            <td style="color:#e34b39;text-align:center;" [class]="item.category">
                                {{item.down}}
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">
                                <small>提示：点击列表条目可切换显示统计信息</small>
                            </td>
                        </tr>
                    </tfoot>
                </table>
                <table class="table" *ngIf="switch === '2'" [@flyIn]="'active'">
                    <thead>
                        <tr>
                            <th colspan="3">{{checkStatus}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of nodesdetail" style="height:50px;">
                            <td colspan="2">{{item.nodeName}}</td>
                            <td style="text-align:right">
                                <div [class]="item.value">{{item.valueName}}</div>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">
                                <button class="back" (click)="return()">返回</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
                <table class="table" *ngIf="switch === '3'" [@flyIn]="'active'">
                    <thead>
                        <tr>
                            <th colspan="3"> {{checkStatus}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of nodesdetail" style="height:50px;">
                            <td>{{item.nodeName}}</td>
                            <td style="color:#87aeef;text-align:center;">
                                {{item.columnValues[0]}}
                            </td>
                            <td style="color:#e34b39;text-align:center;">
                                {{item.columnValues[1]}}
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">
                                <button class="back" (click)="return()">返回</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="panel panel-default">
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;">
                <div class="row">
                    <div class="col-md-6" style="margin-top: 6px;">
                        <span>全网节点地图展示</span>
                    </div>
                    <div class="col-md-3  col-md-offset-3" style="padding-right:15px">
                        <ng-select name="showNodes" [items]="nodesSelect.nodeItems" [ngModel]="nodesSelect.id" (ngModelChange)="nodesSelect.id=$event;markersSelect($event)" placeholder="--选择节点--"> </ng-select>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <app-bmap #Bmap ak="HcGFnQBZg8XXbzH8FKP1OdgNs1MmCxTf" [options]="opts" [offlineOpts]="offlineOpts" (onMapLoaded)="loadMap($event)"
                    (onMarkerClicked)="clickMarker($event)" (onClicked)="clickmap($event)" style="width: 100%;height:367px;display: block;"></app-bmap>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span>一周内全网应用带宽排名</span>
            </div>
            <div class="panel-body">
                <echarts-ng2 #weekBandwidthRank [style]="{'width': '100%', 'height': '239px'}" [option]="wholenetBwData"></echarts-ng2>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span>节点带宽TOP5排名</span>
            </div>
            <div class="panel-body" style="height:269px;">
                <p-dataTable [value]="nodeBwData">
                    <p-column header="#" [style]="{'width':'7%','text-align':'left'}">
                        <ng-template let-col let-c="rowData" let-ri="rowIndex" pTemplate="body">
                            <div class="decorated">{{ri+1}}</div>
                        </ng-template>
                    </p-column>
                    <p-column field="nodeName" header="节点名称" [style]="{'text-align':'left'}">
				        <ng-template pTemplate="header">
		          			{{('channel.chnlName111' | translate) || '节点名称'}}
		      			</ng-template>
				       <ng-template let-col let-node="rowData" pTemplate="body">
				            <a (click)="viewDetail(node)"><span class="node-name">{{node[col.field]}}</span></a>
				        </ng-template> 	
                    </p-column>
                    <p-column field="bwTx" header="上行带宽(bps)" [style]="{'text-align':'left'}"></p-column>
                    <p-column field="bwRx" header="下行带宽(bps)" [style]="{'text-align':'left'}"></p-column>
                    <p-column field="bandwidth" header="总带宽" [style]="{'text-align':'left'}"></p-column>
                </p-dataTable>
            </div>
        </div>
    </div>
</div>